<nz-card [nzLoading]="loading" [nzTitle]="nzTitleTemplate" [nzExtra]="extraTemplate">
    <ng-template #nzTitleTemplate>
        <span>
            <i nz-icon type="share-alt"></i>
            {{'OrganizationTree' | localize}}
        </span>
    </ng-template>
    <ng-template #extraTemplate>
        <ng-container *ngIf="isGranted('Pages.Administration.OrganizationUnits.ManageOrganizationTree')">
            <a (click)="addUnit(null)">
                <i nz-icon type="plus"></i> {{"AddRootUnit" | localize}}
            </a>
            <nz-divider nzType="vertical"></nz-divider>
        </ng-container>
        <a class="ml-sm">
            <i nz-icon type="reload" nz-tooltip [nzTitle]="l('Refresh')" (click)="reload()"></i>
        </a>
    </ng-template>
    <nz-spin [nzTip]="l('MovingWithThreeDot')" [nzSpinning]="draging">
        <nz-tree [(ngModel)]="_treeData" [nzShowExpand]="true" [nzDraggable]="true" (nzClick)="activeNode($event)"
            (nzDblClick)="openFolder($event)" (nzOnDragEnter)="dragEnter($event)" (nzOnDrop)="dragSaveData($event)"
            (nzOnDragEnd)="dragSaveData($event)">
            <ng-template #contextTemplate>
                <ul nz-menu nzInDropDown *ngIf="isGranted('Pages.Administration.OrganizationUnits.ManageOrganizationTree')">
                    <li nz-menu-item (click)="editUnit()">
                        <i nz-icon type="edit"></i>
                        {{'Edit' | localize}}
                    </li>
                    <li nz-menu-item (click)="addSubUnit()">
                        <i nz-icon type="file-add"></i>
                        {{'AddSubUnit' | localize}}
                    </li>
                    <li nz-menu-item (click)="deleteUnit()" *ngIf="isGranted('Pages.Administration.OrganizationUnits.ManageOrganizationTree')">
                        <i nz-icon type="delete"></i>
                        {{'Delete' | localize}}
                    </li>
                </ul>
            </ng-template>
            <ng-template #nzTreeTemplate let-node>


                <span class="custom-node" draggable="true" aria-grabbed="true" [class.active]="activedNode?.key===node.key">
                    <ellipsis lines="1" style="width: 490px">
                        <span [class.shine-animate]="node.origin.isLoading" (contextmenu)="createContextMenu($event,contextTemplate, node)">

                            <i nz-icon type="folder" *ngIf="!node.isExpanded" (click)="openFolder(node)" nz-tooltip
                                [nzTitle]="node.origin.code"></i>
                            <i nz-icon type="folder-open" *ngIf="node.isExpanded" (click)="openFolder(node)" nz-tooltip
                                [nzTitle]="node.origin.code"></i>

                            <span class="ou-title">{{node.title}}</span>
                            <span class="member-count" [class.member-count-hasvalue]="node?.origin?.memberCount">({{node?.origin?.memberCount}})</span>

                        </span>
                    </ellipsis>
                </span>

            </ng-template>

        </nz-tree>
    </nz-spin>
    <div class="text-center" *ngIf="!totalUnitCount">
        <nz-empty class="ant-empty-normal" [nzNotFoundContent]="l('NoOrganizationUnitDefinedYet')"></nz-empty>
    </div>

</nz-card>